/*
 * @Author: liuqiang
 * @Date: 2021-10-01 17:29:17
 * @LastEditTime: 2021-10-01 17:34:01
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \练习\snake\src\moduls\Food.ts
 */

// 定义食物类
class Food {
  // 定义属性 表示食物多对应的元素
  element: HTMLElement;

  constructor() {
    // 获取页面中的food元素 并赋值给element 结尾的!标识不会为null,一定能取到#food元素
    this.element = document.getElementById('food')!;
  }

  // 定义获取食物x,y轴坐标的方法
  get X() {
    return this.element.offsetLeft;
  }
  get Y() {
    return this.element.offsetTop;
  }

  // 修改食物位置
  change() {
    // 生成随机位置
    // 食物的位置最小0, 最大是290
    // 因为🐍移动一格就是10,所以随机生成的食物坐标应该是10的整数倍
    let top = Math.round(Math.random() * 29) * 10 // 生成0-290(包括0和290)之间随机数
    let left = Math.round(Math.random() * 29) * 10 // 生成0-290(包括0和290)之间随机数
    this.element.style.left = left + 'px'
    this.element.style.top = top + 'px'
  }
}

export default Food;